import "./style.scss";
import { Button, Col, Row } from "antd";
import React from "react";
import HomeImage from "@/assets/photos/dn.png";
import GoogleImage from "@/assets/photos/ngoogle-store.png";
import { useTranslation } from "react-i18next";

import homebanner1 from '@/assets/icons/homeBanner1.png'
import homebanner2 from '@/assets/icons/homeBanner2.png'
import { useNavigate } from 'react-router-dom';
const FirstHomePage = () => {
  const { t } = useTranslation();
  const navigate = useNavigate()
  return (
    // <div className="first-home-page">
    <Row className="first-home-page-pc">
      <Col className="left" xs={24} sm={24} md={24} lg={12}>
        <div className="title">
          <span className="small">{t("ForAiTool")}</span>
          <span className="main">{t("AI+RobotTitle")}</span>
          <span className="descriptionMsg">{t("EmbraceFuture")}</span>
        </div>
        <div className="detail">
         
          <span className="descriptionMsgContent">{t("ManyMethod")}</span>
        </div>
        <Button className="menu-item special-button" onClick={() => {navigate('/login')}}>{t("RegisterLogin")}</Button>
      </Col>
      <Col className="right" xs={24} sm={24} md={24} lg={12}>
        <div className="home-image-box">
          <img className="home-image" src={HomeImage} alt="" />
        </div>
        <div className="google-download">
          <img src={GoogleImage} alt="" />
        </div>
      </Col>
      <img src={homebanner1} alt="" className="homebanner1" />
      <img src={homebanner2} alt="" className="homebanner2" />
    </Row>
  );
};

export default FirstHomePage;
